import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import { plus, minus, } from './redux/action';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { connect } from 'react-redux';
import common from './common'

export default class TabHome extends Component {
    static navigationOptions = {
        title: '首页', // in case of stack navigation, this is the title of page top. for bottomTabNavigation, it's the title of icon from bottom tab
        headerTitleStyle: {
            textAlign: 'center',
            flex: 1,
        },
        headerStyle: {
            // backgroundColor: Colors.box.backgroundPrimary,
            borderBottomWidth: 0,
            elevation: 0,
        },
        // headerTintColor: Colors.white,
        headerBackTitle: null, // set header back title of next page
    };

    onPressPlus = () => {
        // this.props.plus(1);
        console.log('onPressPlus', this.props);
        const { nav, sharedState, dispatch, } = this.props;
        dispatch(plus(1));
    }

    onPressMinus = () => {
        // this.props.plus(1);
        // console.log('onPressMinus', this.props);
        const { nav, sharedState, dispatch, } = this.props;
        dispatch(minus(1));
    }

    render() {
        return (
            <SafeAreaView style={{ flex: 1, }}>
                <View style={{ alignItems: 'center', padding: 20, }}>
                    <Text>{common.getActiveRouteName(this.props.nav)}</Text>
                </View>
                <View style={{ flex: 1, }}>
                    <Text style={{ alignSelf: 'center', }}>{this.props.sharedState.cale}</Text>
                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-around', }}>
                    <TouchableOpacity onPress={() => this.onPressPlus()}>
                        <Text>Plus</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.onPressMinus()}>
                        <Text>Minus</Text>
                    </TouchableOpacity>
                    </View>
                </View>
            </SafeAreaView>
        )
    }
}
